import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import { Grid, Form, Breadcrumb } from 'semantic-ui-react'
import Daily from './daily'
import Month from './month'
import Year from './year'

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      value: 'day',
    }
  }

  componentDidMount = () => {
    const { setParentActiveItem } = this.props
    setParentActiveItem('aggregation')
  }

  handleChange = (e, { value }) => this.setState({ value })

  render() {
    const { match, project, link } = this.props
    const { projectName, orgName } = project
    const { name } = match.params
    const { value } = this.state
    return (
      <Grid style={{ width: '100%' }}>
        <Grid.Row style={{ paddingTop: '0' }}>
          <Grid.Column width={16}>
            <Form>
              <Form.Group inline>
                <label>报告类型</label>
                <Form.Radio
                  label="日报"
                  value="day"
                  checked={value === 'day'}
                  onChange={this.handleChange}
                />
                <Form.Radio
                  label="月报"
                  value="month"
                  checked={value === 'month'}
                  onChange={this.handleChange}
                />
                <Form.Radio
                  label="年报"
                  value="year"
                  checked={value === 'year'}
                  onChange={this.handleChange}
                />
              </Form.Group>
            </Form>
          </Grid.Column>
        </Grid.Row>
        {value === 'day' && <Daily match={match} project={project} />}
        {value === 'month' && <Month match={match} project={project} />}
        {value === 'year' && <Year match={match} project={project} />}
      </Grid>
    )
  }
}

const mapDispatchToProps = {
  link: push,
}

export default connect(
  null,
  mapDispatchToProps,
)(App)
